<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :lock-scroll="false"
    :class="{'group-list-mobile-dialog': showMobilePage}"
    class="subcribe-common-dialog medium-common-dialog-size">
    <DialogTitle title="分组管理" font-size="16px" style="margin-bottom: 8px;">
      <PlainCreateBtn style="position: absolute; right: 0" @click="editDialogShow(null)">添加分组</PlainCreateBtn>
    </DialogTitle>
    <div class="group-list-container">
      <draggable
        v-loading="listLoading"
        v-model="list"
        v-bind="dragOptions"
        group="group"
        handle=".draggable-move"
        @end="draggableChange">
        <transition-group type="transition" class="draggable-item-list">
          <template v-for="item in list" >
            <div :key="item.name" :data-id="item.id" class="draggable-item">
              <div class="draggable-move">
                <img :src="draggableImg" class="draggable-img" alt="" >
                <span class="draggable-item-name">{{ item.name }}</span>
              </div>
              <div class="operate-group">
                <el-button type="text" @click="editDialogShow(item)">
                  <span style="color: #406eff">编辑</span>
                </el-button>
                <div class="border-left" />
                <el-button :disabled="item.children && item.children.length > 0" type="text" @click="handleDel(item)">
                  <span :style="{ color: item.children && item.children.length ? '#ccc' : 'red' }">删除</span>
                </el-button>
              </div>
            </div>
          </template>
        </transition-group>
      </draggable>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import draggable from 'vuedraggable';
import { orderProcessManagement } from '@/api/legal';
import draggableImg from '@/assets/orderlist/draggable.png';
import { showModal } from '@/utils/message';
import { mapState } from 'vuex';

export default {
  components: {
    DialogTitle,
    draggable
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    listLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      draggableImg,
      dialogVisible: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    list: {
      get() {
        return this.value;
      },
      set(array) {
        this.$emit('change', array);
      }
    },
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      };
    }
  },
  methods: {
    draggableChange(dom) {
      const { newIndex, oldIndex, newDraggableIndex, oldDraggableIndex } = dom;
      const fromParentId = dom.from.dataset.parentId;
      const toParentId = dom.to.dataset.parentId;
      // 若拖动前后位置未发生改变，不调用接口
      if (newIndex === oldIndex && newDraggableIndex === oldDraggableIndex && fromParentId === toParentId) {
        return;
      }
      const timer = setTimeout(() => {
        const params = {};
        params.id = Number(dom.item.dataset.id);
        params.moveToIndex = dom.newIndex;
        this.orderCallback(params);
        clearTimeout(timer);
      }, 17);
    },
    orderCallback(params) {
      orderProcessManagement(params).then(res => {
        if (res.code === 200) {
          this.$message.closeAll();
          this.$message.success('操作成功');
        } else {
          this.$emit('resetList');
        }
      }).catch(_ => {
        this.$emit('resetList');
      });
    },
    editDialogShow(data) {
      this.$emit('editDialogShow', data);
      this.$nextTick(() => {
        this.dialogVisible = false;
      });
    },
    handleDel(data) {
      showModal('请确认是否删除该分组？').then(_ => {
        this.$emit('handleGroupDel', data.id);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.group-list-container {
  @include scrollBar($x: hidden, $y: auto, $width: 7px);
  max-height: 85vh;
}
.draggable-item-list {
  .draggable-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EBEEFD;
    height: 48px;
    background-color: #fff;
    overflow: hidden;
    .draggable-img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      display: none;
    }
    .draggable-item-name {
      user-select: none;
      color: #333;
    }
    &:hover {
      background-color: #f5f7fa;
    }
    .draggable-move {
      cursor: move;
      flex: 1;
      height: 100%;
      line-height: 48px;
    }
    .operate-group {
      font-size: 14px;
      width: 80px;
      height: 100%;
      line-height: 48px;
      display: flex;
      align-items: center;
      span {
        font-size: 14px;
      }
      .border-left {
        position: relative;
        padding-left:6px;
        margin-left: 6px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -7px;
          width: 1px;
          background: #ddd;
          height: 14px;
        }
      }
    }
  }
}
.group-list-mobile-dialog {
  &::v-deep {
    .el-dialog {
      width: 90% !important;
      .el-dialog__headerbtn .el-icon-close {
        right: -16px;
        top: -56px;
      }
    }
  }
  .group-list-container {
    max-height: 65vh !important;
  }
}
</style>
